<template>
  <div class="page-wrap classic active">
    <div class="swiper-header movie-ad"></div>
    <div class="tab-block">
      <div class="tab-content">
        <div class="page classic" data-hot=".classic">
          <div class="list-wrap">
            <div class="classic-movies">
              <div class="classic-movies-list">
                <van-list
                  v-model="loading"
                  :finished="finished"
                  finished-text="没有更多了"
                  @load="onLoad"
                  :immediate-check="false"
                >
                  <router-link
                    v-for="(i) in ClassicData"
                    :key="i.id"
                    to="/"
                    class="link"
                    ><div class="classic-movie">
                      <div class="avatar">
                        <img :src="i.img" :alt="i.nm" />
                      </div>
                      <div class="movie-info" style="padding: 0">
                        <div class="title line-ellipsis">{{ i.nm }}</div>
                        <div class="english-title line-ellipsis">
                          {{ i.enm }}
                        </div>
                        <div class="actors line-ellipsis">{{ i.cat }}</div>
                        <div class="show-info line-ellipsis">
                          {{ i.pubDesc }}
                        </div>
                      </div>
                      <div class="movie-score">
                        <div class="score line-ellipsis" v-if="i.sc">
                          <span class="grade">{{ i.sc }}</span
                          ><span>分</span>
                        </div>
                        <div class="score line-ellipsis" v-else>
                          <span>暂无评分</span>
                        </div>
                      </div>
                    </div>
                  </router-link>
                </van-list>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import http from "../../utils/htttp";
import Vue from "vue";
import { List } from "vant";

Vue.use(List);
export default {
  data() {
    return {
      limit: 10,
      ClassicData: [],
      total: 0,
      loading: false,
      finished: false,
    };
  },
  async created() {
    let { total, list } = await this.getClassicData();
    this.ClassicData = list;
    this.total = total;
  },
  mounted() {},
  methods: {
    getClassicData() {
      return new Promise((res, rej) => {
        http("/classic", { params: { limit: this.limit } }).then((data) => {
          res({
            total: data.data.classicMovies.total,
            list: data.data.classicMovies.list,
          });
        });
      });
    },
    onLoad() {
      if (this.total === this.ClassicData.length) {
        this.finished = true;
        return;
      }
      this.limit += 10;
      http("/classic", {
        params: {
          limit: this.limit,
        },
      }).then((res) => {
        this.ClassicData = res.data.classicMovies.list
        this.loading = false;
      });
    },
  },
  computed:{
     
  }
};
</script>